<template>
    <div class="drag" ref="dragDiv">
        <div class="drag_bg" ref="bgRef">
        </div>
        <div class="drag_text" ref="textRef">
            {{ confirmWords }}
        </div>
        <div ref="moveDiv" class="handler" :class="{ 'handler-success': confirmSuccess }"
            @mousedown="mouseDownFn($event)">
            <el-icon :size="30">
                <CircleCheck v-if="confirmSuccess"/>
                <Right v-else/>
            </el-icon>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const confirmWords = ref('请按住滑块，向右拖动滑块'); // 滑块文字
const confirmSuccess = ref(false); // 是否已经成功
const beginClientX = ref(0); // 距离屏幕左端距离
const mouseMoveState = ref(false); // 是否触发拖动状态
const maxWidth = ref(0); // 拖动最大宽度
const dragDiv = ref(null);
const moveDiv = ref(null);
const bgRef = ref(null);
const textRef = ref(null);

onMounted(() => {
    nextTick(() => {
        if (dragDiv.value && moveDiv.value) {
            maxWidth.value = dragDiv.value.clientWidth - moveDiv.value.clientWidth;
            document.getElementsByTagName('html')[0].addEventListener('mousemove', mouseMoveFn);
            document.getElementsByTagName('html')[0].addEventListener('mouseup', moseUpFn);
        }
    });

});

function mouseDownFn(e) {
    moveDiv.value.style.transition = 'none'
    bgRef.value.style.transition = 'none';
    if (!confirmSuccess.value) {
        e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
        mouseMoveState.value = true;
        beginClientX.value = e.clientX;
    }
}
function mouseMoveFn(e) {
    if (mouseMoveState.value) {

        let width = e.clientX - beginClientX.value;
        
        // console.log(width,maxWidth.value);
        if (width > 0 && width <= maxWidth.value) {

            moveDiv.value.style.left = width + 'px';
            bgRef.value.style.width = width + 'px';
        } else if (width > maxWidth.value) {
            successFunction();
        }
    }
}

function successFunction() {
    confirmSuccess.value = true;
    confirmWords.value = '验证通过';
    document.getElementsByTagName('html')[0].removeEventListener('mousemove', mouseMoveFn);
    document.getElementsByTagName('html')[0].removeEventListener('mouseup', moseUpFn);
    textRef.value.style.color = '#fff';
    moveDiv.value.style.left = maxWidth.value + 'px';
    bgRef.value.style.width = maxWidth.value + 'px';
    document.getElementsByClassName('drag_bg')[0].style.position = 'static'
    document.getElementsByClassName('drag_text')[0].style.color = '#f43107'
}

function moseUpFn(e) {
    mouseMoveState.value = false;
    var width = e.clientX - beginClientX.value;
    if (width < maxWidth.value) {
        moveDiv.value.style.transition = 'all 0.5s'
        bgRef.value.style.transition = 'all 0.5s';
        moveDiv.value.style.left = 0 + 'px';
        bgRef.value.style.width = 0 + 'px';
    }
}
defineExpose({
    sliderSuccess: confirmSuccess
});

</script>

<style lang="scss" scoped>
.drag {
    position: relative;
    background-color: #EEEEEE;
    width: 420px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 6px;
    color: #fff;

    .drag_bg {
        background-color: #fce2e0;
        height: 50px;
        width: 0px;
        border-radius: 4px 0 0 4px;
        z-index: 999;
        position: relative;
    }

    .drag_text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #F43107;
        position: absolute;
        top: 0px;
        width: 100%;
        text-align: center;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
    }

    .handler {
        width: 50px;
        height: 50px;
        border-radius: 4px;
        cursor: pointer;
        background-color: #F43107;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
    }

    .handler-success {
        border-radius: 4px;
    }
}
</style>